<template>
  <div>

    <div class="appBox">
      <div class="topReturn flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="$router.go(-1)">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title">{{ $route.query.id ? '编辑菜单列表':"创建菜单列表" }}</div>
        </div>
        <div>

        </div>
      </div>
      <el-row :gutter="30"
              class="rowBox">
        <el-col :span="18"
                class="leftCol">
          <div class="">
            <el-form ref="ruleFormRef"
                     :model="ruleForm"
                     status-icon
                     :rules="rules"
                     label-width="180px"
                     label-position="right"
                     class="demo-ruleForm mt30">
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="菜单名称："
                                prop="name">
                    <el-input v-model="ruleForm.name"
                              @input="ruleForm.name = $input.inputLimit('D10012',ruleForm.name)"
                              placeholder="(最长六个字符)"
                              maxlength="6"
                              clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="跳转类型："
                                prop="jumpType">
                    <el-radio-group v-model="ruleForm.jumpType"
                                    :disabled="ruleForm.id">
                      <el-radio :label="0">小程序链接</el-radio>
                      <el-radio :label="1">职位列表</el-radio>

                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="10"
                        v-if="ruleForm.jumpType == 0">
                  <el-form-item label="小程序链接："
                                prop="jumpUrl">
                    <el-input v-model="ruleForm.jumpUrl"
                              @input="ruleForm.jumpUrl = $input.inputLimit('D10012',ruleForm.jumpUrl)"
                              placeholder="/page/home/index"
                              clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="上传图标：(40*40)"
                                prop="icon">
                    <uploadImg :showNum="1"
                               :uploadImgList="ruleForm.icon"
                               @changeUploadImgList="changeUploadImgList" />
                  </el-form-item>
                </el-col>
                <el-col :span="14"
                        v-if="ruleForm.jumpType == 1">
                  <el-form-item label="上传背景图："
                                prop="backImg">
                    <uploadImg :showNum="1"
                               class="bacImg"
                               :uploadImgList="ruleForm.backImg"
                               @changeUploadImgList="changeUploadImgList1" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="mb20 flex_sb">
            <div></div>
            <div>
              <span class="c9"
                    v-if="ruleForm.jumpType == 1">拖动列表排序</span>
              <el-button v-preventReClick
                         class="ml20"
                         type="primary"
                         plain
                         v-if="ruleForm.jumpType == 1"
                         @click="dialogVisible = true">添加岗位</el-button>
              <el-button v-preventReClick
                         type="primary"
                         @click="submit">保存</el-button>
            </div>
          </div>
          <el-table border
                    v-show="ruleForm.jumpType == 1"
                    :data="tableData"
                    class="flex1"
                    style="width: 100%"
                    :header-cell-style="{ color: '#000' }">
            <el-table-column prop=""
                             width="100"
                             align="center"
                             label="排序">
              <template #default="scope">
                {{ scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="name"
                             label="岗位名称"
                             show-overflow-tooltip
                             align="center">
            </el-table-column>
            <el-table-column prop="companyName"
                             label="所属企业"
                             show-overflow-tooltip
                             align="center">
            </el-table-column>
            <el-table-column prop=""
                             label="操作"
                             align="center"
                             width="120">
              <template #default="scope">
                <div class="btnsDatil flex_c cup primary">
                  <!-- 其它操作 -->
                  <div @click="handleAction('delete', scope.row,scope.$index)"
                       class="ml14">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="6"
                class="rightCol"
                v-if="ruleForm.jumpType == 1">
          <div class="wxappbox">
            <h2 class="tac f16 fb">{{ ruleForm.name }}</h2>
            <div class="mt10 imgbc"><img class="imgbc"
                   :src="ruleForm?.backImg ? ruleForm.backImg[0]?.url : ''"
                   alt="背景图还未上传"></div>
            <div class="listbox">
              <div class="pl10 pr10 flex_c">
                <div>全国</div>
                <div class="ml4"><el-icon size="12">
                    <ArrowDownBold />
                  </el-icon></div>
                <div class="flex1 ml10">
                  <el-input></el-input>
                </div>
              </div>
              <div class="flex_sb pl10 pr10 mt10">
                <div class="flex1 f14 fb #333 overflow_1">推荐职位</div>
                <div class="selcetBox">薪资</div>
                <div class="selcetBox ml10">筛选</div>
              </div>

              <div class="mt4 scrollbar pl10 pr8">
                <div v-for="(item) in tableData"
                     class="forBox"
                     :key="item">

                  <div class="flex_sb">
                    <div class="f16 fb overflow_1 flex1">{{ item.name }}</div>
                    <div class="primary f14 fb ml10">{{item.salaryStart}}-{{item.salaryEnd}}元</div>
                  </div>

                  <div class="mt10 flex">
                    <div class="flex flex1 overflow_1">
                      <div v-for="i in item.welfareStr"
                           class="welfare"
                           :key="i">{{ i.dictValue }}</div>z``
                    </div>
                    <div class="c6 mt4">{{ item.salaryType == 0 ? '日结' :  item.salaryType == 1 ? '月薪' : '年薪' }}</div>
                  </div>

                  <div class="flex_c c6 mt16">
                    <div class="companyLogo">
                      <img class="companyLogo"
                           :src="item.companyLOGO ? JSON.parse(item.companyLOGO)[0]?.url :''"
                           alt="">
                    </div>
                    <div class="overflow_1 flex1 ml6">{{ item.companyName }}</div>
                    <div class="c9 ml10">{{ item.workAddrDistrict }}</div>
                    <div>
                      <img src="@/assets/i_dw.png"
                           alt=""
                           class="i_dw">
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>
        </el-col>
      </el-row>

    </div>
    <el-dialog v-model="dialogVisible"
               title="添加推荐岗位"
               width="55%"
               :before-close="handleClose">
      <div class="dialogVisibleBox">
        <div class="searchList">
          <el-form :model="params1"
                   ref="FormInstance "
                   class="boxFrom flex_sb">
            <div class="searchBox flex">
              <template v-for="(item, index) in totalInputColumns1"
                        :key="index">
                <el-form-item class="mr10"
                              v-if="item.type == 'input'">
                  <el-input v-model="params1[item.key]"
                            clearable
                            :placeholder="item.label"></el-input>
                </el-form-item>
                <el-form-item class="mr10"
                              v-if="item.type == 'select'">
                  <el-select v-model="params1[item.key]"
                             :placeholder="item.label"
                             clearable
                             v-if="item.key == 'status'">
                    <el-option label="启用"
                               value="1" />
                    <el-option label="禁用"
                               value="0" />
                  </el-select>

                </el-form-item>
                <el-form-item class="mr10"
                              v-if="item.type == 'time'">
                  <el-date-picker v-model="params1[item.key]"
                                  type="date"
                                  value-format="YYYY-MM-DD"
                                  placeholder="请选择时间" />
                </el-form-item>
              </template>
            </div>

            <el-form-item class="btns">
              <el-button v-preventReClick
                         type="primary"
                         plain
                         @click="handleAction('query')">搜索</el-button>
              <el-button v-preventReClick
                         @click="handleAction('reset')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table border
                  :data="tableData1"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="name"
                           label="岗位名称"
                           show-overflow-tooltip
                           align="left">
          </el-table-column>
          <el-table-column prop="companyName"
                           label="所属企业"
                           show-overflow-tooltip
                           align="left">
          </el-table-column>
          <el-table-column prop=""
                           label="操作"
                           align="center"
                           width="100">
            <template #default="scope">
              <div class="btnsDatil primary cup">
                <!-- 其它操作 -->
                <div @click="handleAction('tj1', scope.row,scope.$index)"
                     v-if="!tableData_ids.includes(scope.row.id)">添加</div>
                <div @click="handleAction('tj2', scope.row,scope.$index)"
                     v-if="tableData_ids.includes(scope.row.id)"
                     class="">取消添加</div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination background
                         v-model:current-page="params1.pageNum"
                         v-model:page-size="params1.pageSize"
                         :page-sizes="[10, 20, 30, 50]"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="totalSize1"
                         @size-change="handleSizeChange1"
                         @current-change="handleCurrentChange1" />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">

        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import Sortable from 'sortablejs'; //引入插件

export default defineComponent({

  setup () {
    const router = useRouter();
    const route = useRoute();
    const app = getCurrentInstance()?.proxy;
    const initState = () => {
      return {

        dialogVisible: false,
        ruleForm: {
          backImg: [],
          icon: [],
          name: '',
          jumpType: 1,
          positionIdList: [],
        },
        rules: {
          name: [
            { required: true, message: "请输入菜单名称", trigger: "blur" },
          ],
          backImg: [
            { required: true, message: "请上传背景图片", trigger: "blur" },
          ],
          icon: [
            { required: true, message: "请上传图标", trigger: "blur" },
          ],
          jumpUrl: [
            { required: true, message: "请输入小程序链接", trigger: "blur" },
          ],
          jumpType: [
            { required: true, message: "请输入小程序链接", trigger: "blur" },
          ],

        },

        totalSize: 0,
        tableData: [],

        totalSize1: 0,
        tableData1: [

        ],
        params1: {
          pageNum: 1,
          pageSize: 10,
          positionStatus: 1,
        },
        totalInputColumns1: [
          { key: "keyWord", label: "搜索企业/岗位名称", type: "input" },
        ],
        jsonTableData: [],
        tableData_add: [],
        tableData_ids: [],

      };
    };
    const state = reactive(initState());
    onMounted(() => {
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      };
      methods.rowDrop();

      methods.getDataList1()
      if (app.$route.query.id) {
        methods.getDataList();
      }
    });
    const methods = {
      rowDrop () {
        const tbody = document.querySelector('.leftCol .el-table__body-wrapper tbody');
        console.log(tbody);
        Sortable.create(tbody, {
          onEnd ({ newIndex, oldIndex }) {
            if (newIndex == oldIndex) return;
            state.tableData.splice(newIndex, 0, state.tableData.splice(oldIndex, 1)[0]);
            const newArray = state.tableData.slice(0);
            state.tableData = [];
            nextTick(function () {
              state.tableData = newArray;
            });
          }
        });

      },
      changeUploadImgList (data) {
        state.ruleForm.icon = data;
      },
      changeUploadImgList1 (data) {
        state.ruleForm.backImg = data;
      },

      submit () {
        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            let url = 'appletMenu/saveAppletMenu'
            if (app.$route.query.id) {
              url = 'appletMenu/updateById'
            }
            if (state.ruleForm.jumpType == 1) {
              state.ruleForm.positionIdList = state.tableData.map(a => a.id)
            }
            let data = JSON.parse(JSON.stringify(state.ruleForm))
            data.backImg = state.ruleForm.backImg[0]?.url
            data.icon = state.ruleForm.icon[0]?.url
            app.$post(url, data).then(res => {
              if (res.code == 200) {
                ElMessage.success('保存成功')
                app.$router.go(-1)
              }
            })
          } else {
            return ElMessage.error('请输入完整菜单信息')
          }
        })
      },
      handleAction (type, data, index) {
        switch (type) {
          case "query": //查询
            methods.getDataList1();
            break;
          case "reset": // 重置
            state.params1 = initState().params1;
            break;
          case "subAdd": //保存
            methods.subData()
            break;
          case "delete": //添加
            state.tableData.splice(index, 1)
            state.tableData_ids.splice(state.tableData_ids.indexOf(data.id), 1)

            break;
          case "tj1": //添加
            state.tableData.push(data)
            state.tableData_ids.push(data.id)
            break;
          case "tj2": //取消添加
            state.tableData_ids.splice(state.tableData_ids.indexOf(data.id), 1)
            state.tableData.forEach((res, index) => {
              if (res.id == data.id) {
                state.tableData.splice(index, 1)
                return
              }
            })
            break;

        }
      },

      getDataList () {
        app.$get('appletMenu/getAppletMenuById?id=' + app.$route.query.id).then(res => {
          if (res.data) {
            res.data.backImg = [{ url: res.data.backImg, fileType: 'image' }]
            res.data.icon = [{ url: res.data.icon, fileType: 'image' }]
            state.ruleForm = res.data
            console.log(state.ruleForm);
            state.tableData = res.data.positionList
            state.tableData_ids = res.data.positionList.map(a => a.id)
            state.tableData_add = JSON.parse(JSON.stringify(state.tableData))
            state.jsonTableData = JSON.parse(JSON.stringify(state.tableData))
          }
        })
        // app.$get("/sysShare/getById", { id: route.query.id })
        //   .then((res) => {
        //     if (res.code == 200) {
        //     }
        //   });
      },
      getDataList1 () {
        app.$post('/appletMenu/positionPageList', state.params1).then(res => {
          console.log(res);
          if (res.data) {
            state.tableData1 = res.data.list
            state.totalSize1 = res.data.total
          }
        })
      },
      //分页变化
      handleSizeChange () {
        state.params.pageNum = 1;
        methods.getDataList();
      },
      //表格翻页
      handleCurrentChange () {
        methods.getDataList();
      },
      //分页变化
      handleSizeChange1 () {
        state.params1.pageNum = 1;
        methods.getDataList1();
      },
      //表格翻页
      handleCurrentChange1 () {
        methods.getDataList1();
      },
    }
    return {
      ...toRefs(state),
      ...methods,
    };
  }
});
</script>


<style lang="scss" scoped>
/* HTML: <div class="loader"></div> */

.rowBox {
  height: calc(100% - 25px);
  .rightCol {
    display: flex;
    justify-content: center;

    .wxappbox {
      padding: 10px 0;
      position: relative;
      z-index: 9999;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 15px;
      width: 335px;
      height: calc(335px * 2.164);
      .imgbc {
        width: 100%;
        height: 190px;
      }
      .listbox {
        font-size: 12px;
        padding: 14px 0;
        position: relative;
        top: -20px;
        width: 100%;
        background: #f5f6f7;
        border-radius: 14px 14px 15px 15px;
        height: calc(100% - 210px);
        .selcetBox {
          padding: 4px 10px;
          background: #ffffff;
          border-radius: 5px;
        }
        .scrollbar::-webkit-scrollbar {
          width: 5px;
        }
        .scrollbar::-webkit-scrollbar-thumb {
          border-radius: 2px;
          background: #ccc;
        }
        .scrollbar::-webkit-scrollbar-track {
          border-radius: 0;
          background: #f5f5f5;
        }
        .scrollbar {
          height: calc(100% - 70px);
          overflow-x: hidden;
          overflow-y: auto;

          .forBox {
            margin-top: 9px;
            background: #ffffff;
            width: 100%;
            border-radius: 13px;
            padding: 13px 10px;
            box-sizing: border-box;
            .welfare {
              background: #f5f6f7;
              border-radius: 4px;
              padding: 3px 6px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              margin-right: 10px;
              font-size: 12px;
              color: #666666;
            }
            .i_dw {
              margin-left: 4px;
              margin-top: 4px;
              width: 12px;
              height: 12px;
            }
            .companyLogo {
              border-radius: 50%;
              width: 22px;
              height: 22px;
            }
          }
        }
      }
    }
  }
  .leftCol {
    height: 100%;
    display: flex;
    flex-direction: column;
    .bacImg {
      ::v-deep(.el-image) {
        width: 180px;
      }
    }
  }
}

::v-deep(.el-dialog__body) {
  height: 540px;
}
.dialogVisibleBox {
  height: 100%;
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
::v-deep(.el-dialog) {
  min-height: 540px;
}
.w220 {
  width: 150px;
}
.active {
  border: 2px solid #409eff !important;
}
.imgBorderBox {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid #ccc;
  margin: 0 10px 10px 0;
}
.topReturn {
  .ruturn {
    color: rgba(121, 121, 121, 1);
    font-size: 16px;
    position: relative;
    margin-left: 10px;
    margin-top: -2px;
  }
  .ruturn::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 4px;
    width: 1px;
    height: 16px;
    background: rgba(121, 121, 121, 0.8);
  }
  .left {
    align-items: center;
  }
  .title {
    color: rgb(83, 83, 83);
    font-size: 16px;
    margin-left: 40px;
    font-weight: bold;
  }
}
.top {
  padding: 30px 40px;
  border-radius: 5px;
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
}
</style>